<template>
    <div class="walletHome">
        <div class="group">
            <div class="item" @click="$router.push('myWallet/balance')">
                <div class="l">
                    <div class="item_sub">
                        <i class="iconfont icon-keyongyue"></i>
                        <span>余额</span>
                    </div>
                </div>
                <div class="r" >
                   <div class="item_sub">
                        <span>100元</span>
                        <i class="iconfont icon-right"></i>
                   </div>
                </div>
            </div>
            <div class="item" @click="$router.push('myWallet/coupon')">
                <div class="l">
                    <div class="item_sub">
                        <i class="iconfont icon-daijinquan"></i>
                        <span>代金券</span>
                    </div>
                </div>
                <div class="r" >
                   <div class="item_sub">
                        <span>{{myCoupon.length}}张</span>
                        <i class="iconfont icon-right"></i>
                   </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {myCoupon} from '@/http'
    export default {
        name:'walletHome',
        data(){
            return{

            }
        },
        computed:{
             ...mapGetters(['cookie','login_info','myCoupon'])
        },
        methods:{
            getCoupon(){
                let user_id = this.login_info.user_id;
                myCoupon({user_id}).then((data)=>{
                    this.$store.dispatch('myCoupon',data.data.rows)
                })
            }
        },
        mounted(){
            // this.getCoupon()
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../../../style/var.scss';
    .walletHome{
        width:100%;
        height:100%;
        padding:50px 0;
        .group{
            background:$white;
            .item{
                display: flex;
                justify-content: space-between;
                padding:100px;
                box-shadow: 0 1px 0 0 $border_base;
                .item_sub{
                    display: flex;
                    align-items: center;
                }
                .iconfont{
                    padding:0 20px;
                }
            }
        }
    }
</style>

